<template>
    <div id="wrapper">
        <my-header></my-header>
        <left-menu></left-menu>
        <div id="page-wrapper">
            <div class="container-fluid">
                <div class="row bg-title">
                    <div class="col-12">
                        <h4 class="page-title" style="text-transform: none;">
                            <ol class="breadcrumb" style="float: none;">
                                <li v-for="item in paths" v-if="$route.name !== item.name">
                                    <a  @click="changePath(item)" style="cursor: pointer;">{{item.desc}}</a>
                                </li>
                                <li class="active" v-else>
                                    {{item.desc}}
                                </li>
                            </ol>
                        </h4>
                    </div>
                </div>
                <keep-alive>
                    <router-view></router-view>
                </keep-alive>
            </div>
        </div>
        <footer class="footer text-center"> Copyright © {{new Date().getFullYear()}} Funkey. All rights reserved.</footer>
    </div>
</template>

<script>
    import LeftMenu from '@/components/LeftMenu'
    import MyHeader from "@/components/MyHeader"
    import {loadRoutePath, saveRoutePath, saveRoutePathAll} from "@/cache";

    export default {
        name: "Home",
        components: {MyHeader, LeftMenu},
        mounted() {
            $("#page-wrapper").css({'min-height': $(window).height() - 60})
        },
        created() {
            this._saveRoutePath()
        },
        data() {
            return {
                paths: []
            }
        },
        methods: {
            _saveRoutePath() {
                this.paths = saveRoutePath({
                    name: this.$route.name,
                    path: this.$route.path,
                    desc: this.$route.name === 'Chat' ? this.$route.params.mailbox : this.$route.meta.desc
                })
            },
            changePath(item) {
                // 删除目标路由后的路由链
                let index = this.paths.findIndex( path => path.name === item.name )
                this.paths.splice(index, this.paths.length - index)
                saveRoutePathAll(this.paths)
                this.$router.push(item.path)
            }
        },
        computed: {
            // // 根据不同route生成description
            // description() {
            //     return this.$route.name === 'Chat' ? this.$route.params.mailbox : this.$route.meta.desc
            // },
        },
        watch: {
            '$route'() {
                this._saveRoutePath()
            }
        }
    }
</script>

<style scoped>

</style>